<template>
  <div class="package-builder">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>一键打包工具</span>
          <el-button type="primary" @click="handleBuild" :loading="building">
            <el-icon><Download /></el-icon>
            生成语言包
          </el-button>
        </div>
      </template>

      <el-form :model="config" label-width="120px">
        <el-form-item label="PKHeX版本">
          <el-select v-model="config.version" placeholder="选择版本">
            <el-option label="2024.05.14" value="2024.05.14" />
            <el-option label="2024.06.01" value="2024.06.01" />
          </el-select>
        </el-form-item>

        <el-form-item label="包含内容">
          <el-checkbox-group v-model="config.includes">
            <el-checkbox label="translations" name="translations">翻译文件</el-checkbox>
            <el-checkbox label="dll" name="dll">插件DLL</el-checkbox>
            <el-checkbox label="readme" name="readme">使用说明</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <el-divider />

      <div v-if="buildResult">
        <h4>打包结果</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="文件名">{{ buildResult.filename }}</el-descriptions-item>
          <el-descriptions-item label="大小">{{ buildResult.size }}</el-descriptions-item>
          <el-descriptions-item label="生成时间">{{ buildResult.created_at }}</el-descriptions-item>
        </el-descriptions>
        
        <el-button type="success" @click="handleDownload" style="margin-top: 10px">
          <el-icon><Download /></el-icon>
          下载语言包
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

interface BuildConfig {
  version: string
  includes: string[]
}

interface BuildResult {
  filename: string
  size: string
  created_at: string
  download_url: string
}

const config = ref<BuildConfig>({
  version: '2024.05.14',
  includes: ['translations', 'dll', 'readme']
})

const building = ref(false)
const buildResult = ref<BuildResult | null>(null)

const handleBuild = async () => {
  building.value = true
  try {
    const response = await axios.post('http://localhost:8000/api/build', config.value)
    buildResult.value = response.data
  } catch (error) {
    console.error('打包失败:', error)
  } finally {
    building.value = false
  }
}

const handleDownload = () => {
  if (buildResult.value) {
    window.open(`http://localhost:8000${buildResult.value.download_url}`, '_blank')
  }
}
</script>

<style scoped>
.package-builder {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
